<template>
  <!-- 提现结算 提现审核 -->
  <div class="app-container jklis">
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new">
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item label="提现状态" prop="goodsId">
        <el-select v-model="queryParams.state" placeholder="请选择提现状态" clearable @change="searchList">
          <el-option v-for="(dict, key) in commonMaps.tixianStateMap" :key="key" :label="dict.label" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="提现时间" prop="">
        <el-date-picker v-model="timer" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="searchList" size="small">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="申请人昵称" prop="applicantName">
        <el-input v-model="queryParams.applicantName" placeholder="请输入申请人" clearable @change="searchList" />
      </el-form-item>
      <el-form-item label="账户名称" prop="applicantRealName">
        <el-input v-model="queryParams.applicantRealName" placeholder="请输入账户名称" clearable @change="searchList" />
      </el-form-item>

      <el-form-item label="提现人类型" prop="partyType">
        <el-select v-model="queryParams.partyType" placeholder="请选择提现状态" clearable @change="searchList">
          <el-option v-for="(dict, key) in options" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="searchList" class="zdy-btn">搜索</el-button>
        <el-button icon="el-icon-refresh" type="primary" plain @click="resetQuery" class="zdy-btn zdy-btn-refresh">重置</el-button>

      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table :data="tableData.records" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="tenantName" label="店铺"></el-table-column>
        <el-table-column prop="applicantName" label="申请人"></el-table-column>
         <el-table-column prop="partyType" label="提现人类型">
          <template slot-scope="scope">
            <span v-show="scope.row.partyType==1">店铺 </span>
            <span v-show="scope.row.partyType==2">用户</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicantTel" label="联系电话">
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column prop="applicantAmount" label="申请金额"></el-table-column>
        <el-table-column prop="amount" label="打款金额"></el-table-column>
        <el-table-column prop="createTime" label="账户类型">
          <template slot-scope="scope">
            <span>{{
                  commonMaps.accountType[scope.row.accountType] || commonMaps.accountType["1"]
                }}</span><br />

          </template>
        </el-table-column>
        <el-table-column prop="applicantRealName" label="账户名称"></el-table-column>
        <el-table-column prop="account" label="账号">
          <template slot-scope="scope">
            <span>{{scope.row.account}} </span>
            <div style="color:red" v-show="scope.row.isCheck==1">该账号是首次提现或与上次提现不一致，请核对后再打款！</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="提现类型">
          <template slot-scope="scope">
            <span v-show="scope.row.type==1">余额提现 </span>
            <span v-show="scope.row.type==2">保证金提现</span>
          </template>
        </el-table-column>
          
        <el-table-column prop="" label="提现状态">
          <template slot-scope="scope">
            <el-tag :type="commonMaps.tixianStateMap[scope.row.state].type">{{
                  commonMaps.tixianStateMap[scope.row.state].label
                }}</el-tag>

          </template>
        </el-table-column>

       
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openOrder(scope.row)" v-if="scope.row.state==1">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages-box">

      <pagination :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <tixianSettling ref="tixianSettling"></tixianSettling>
  </div>
</template>

<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
import tixianSettling from "./tixianSettling.vue";
export default {
  name: "tixianSettle",
  components: {
    tixianSettling,
  },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      btnLoading: false,
      loading: false,
      timer: [],
        options: [{
          value: 1,
          label: '店铺'
        }, {
          value:2,
          label: '用户'
        }, ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        applicantTimeStart: null,
        applicantTimeEnd: null,
        state: "1",
        dataType: "all",
        isCheck: 1,
        tenantId:''
      },
    };
  },
  created() {
    this.getList();
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
  },
  activated() {},
  methods: {
    // 获取列表
    getList() {
      // queryParams 请求列表
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.queryParams.applicantTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.applicantTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.applicantTimeStart = "";
        this.queryParams.applicantTimeEnd = "";
      }
      myMoneyApi.withdrawalRecordList(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // 搜索
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 打开处理提现的弹窗
    openOrder(order) {
      this.$refs.tixianSettling.open(order);
    },
    // tabs切换时触发
    tabChange() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        applicantTimeStart: null,
        applicantTimeEnd: null,
        state: "1",
        dataType: "all",
        isCheck: 1,
        tenantId:''
      };
      this.getList();
    },

    exportOrder() {},
  },
};
</script>
<style lang="scss" scoped>
.link {
  color: blue;
  cursor: pointer;
}
</style>
